<template>
    <div class="follow-project">
        <skeleton 
            :loading="firstLoading"
            :rows="3"
        ></skeleton>

        <div 
        v-if="!firstLoading"
        class="project-content"
        >
            <template v-if="tableData && tableData.length > 0">
                <div 
                class="items" 
                v-for="(item , ind) in tableData" 
                :key="ind" 
                v-czc="['首页', '点击列表', '关注项目列表', ind , 'home-list-followProjectList']"
                >
                    <content-item 
                    :data="item" 
                    :title="`${ind+1}.${item.name}`" 
                    :rowguid="item.guid" 
                    @titleClick="titleClick(item)"
                    >
                        <template slot="time">
                            <span></span>
                        </template>

                        <template slot="content">
                            <div class="item-info">
                                <div class="item-info-top">
                                    <p 
                                    class="re-link" 
                                    @click="titleClick(item)"
                                    >
                                        {{item.notice}}
                                    </p>

                                    <div class="time_con">
                                        <span>{{item.publishtime}}</span>

                                        <collect-star
                                            :data="{objectguid: item.guid, objectname: item.notice, objecttype: noticeCollType(item.noticetype), marktype: 'collect',}"
                                            :defaultVal="item.bj_collect === '1'"
                                        ></collect-star>
                                    </div>
                                </div>

                                <div class="item-info-bottom">
                                    <my-tag v-show="item.area">{{item.area}}</my-tag>
                                    <my-tag v-show="item.noticetype">{{item.noticetype}}</my-tag>
                                    <my-tag v-show="item.industry && item.industry != '未知'">{{item.industry}}</my-tag>
                                    <my-tag v-show="item.noticetype == '中标公告' && !!item.noticetype" :is-default="false">{{Math.floor(item.price) /10000}} 万元</my-tag>
                                </div>
                            </div>
                        </template>

                        <template slot="tag">

                        </template>

                        <template slot="icon">
                            <!-- 关注的项目 -->
                            <collect-star
                                :data="{ objectguid: item.project_code, objectname: item.name, objecttype: 'project', marktype: 'follow',}"
                                :defaultVal="item.bj_follow === '1'"
                                :icon="['&#xeca2;', '&#xeca1;']"
                            ></collect-star>
                        </template>

                    </content-item>
                </div>
            </template>

            <empty-list v-if="!tableData.length" :margin="50">
                <span>暂无数据</span>
            </empty-list>
        </div>

        <my-pagination 
            v-show="total > pgData.pagesize" 
            class="pagination" 
            ref="page" 
            v-model="tableData" 
            :action="`${$store.state.api.tbUrl}/searchrelated/projectinterests.json`"
            :search="pgData" 
            :auto-show="false" 
            :after-query="afterQuery"
        ></my-pagination>
    </div>
</template>

<script>
import notice from '@/mixins/notice.js';

import CollectStar from '@components/sys/collect.vue';
import EmptyList from '@components/sys/empty-list';
import contentItem from '../../../components/item.vue';
import Skeleton from '../../../components/skeleton.vue';

export default {
    mixins: [notice],
    components: {
        CollectStar,
        EmptyList,
        contentItem,
        Skeleton,
    },
    props: {
        // 列表单页的条数
        pagesize: {
            type: Number,
            default: 10,
        },
    },
    data() {
        return {
            tableData: [],
            total: 0,

            pgData: {
                sortname: 'publishtime',
                pagesize: this.pagesize,
            },

            firstLoading: true,
        };
    },
    computed: {},
    methods: {
        deSearch: function () {
            this.$refs.page.queryData();
        },

        afterQuery: function (data, res) {
            this.total = res.total;

            this.firstLoading = false;
        },

        //跳转页面
        titleClick: function (data) {
            this.openNotice(data.guid, data.noticetype , true);
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.follow-project {
    .project-content {
        .items {
            & + .items {
                margin-top: 16px;
            }

            .item-info {
                .item-info-top {
                    display: flex;
                    margin-top: 10px;
                    align-items: center;

                    p {
                        flex: 1;
                    }
                    .time_con {
                        display: flex;
                        justify-content: space-between;

                        & > span{
                            color: #909399;
                            margin-right: 1em;
                        }

                        .iconfont {
                            cursor: pointer;
                        }
                    }
                }

                .item-info-bottom {
                    margin-top:10px;
                }
            }
        }
    }

    .pagination {
        margin-top: 20px;
    }
    .re-link {
        color: #6689ff;
        text-decoration: underline;
        cursor: pointer;
    }
}
</style>
